<template>
	<view>
		<!-- 状态栏 -->
		<!-- <view class="status" :style="{ height: this.$store.state.statusHight + 'px' }"></view> -->
		<!-- 操作栏 -->
		<!-- 登录注册部分 -->
		<view class="user">
			<view class="hand_login flex ">
				<image :src="userinfo.hesdPortrait || '../../static/images/yonghu.png'"></image>
				<view class="info" @click="login">
					<view class="name">{{ userinfo.name || '点击登录' }}</view>
					<view class="personality textHd">个人介绍: {{ userinfo.userMotto || '暂无' }}</view>
				</view>
			</view>
		</view>
		<!-- 用户数据 -->
		<view class="tabInfo flex">
			<view class="tabItem" @click="navtoTravel">
				<text>{{ Usernum.postCount || '---' }}</text>
				<view>游记</view>
			</view>
			<view class="tabItem" @click="navtoAttention">
				<text>{{ Usernum.myFollowCount || '---' }}</text>
				<view>关注</view>
			</view>
			<view class="tabItem" @click="navtoFans">
				<text>{{ Usernum.followMeCount || '---' }}</text>
				<view>粉丝</view>
			</view>
		</view>
		<!-- 操作列表 -->
		<view class="operation">
			<view class="operationItem flex flexBei" @click="navtocollection">
				<view>
					<view class="iconfont icon-shoucang inview"></view>
					<text>我的收藏</text>
				</view>
				<view class="iconfont icon-arrow-down inview"></view>
			</view>
			<view class="operationItem flex flexBei">
				<view>
					<view class="iconfont icon-lishi inview"></view>
					<text>浏览历史</text>
				</view>
				<view class="iconfont icon-arrow-down inview"></view>
			</view>
			<view class="operationItem flex flexBei" @click="navtosendTravel">
				<view>
					<view class="iconfont icon-daohang1 inview"></view>
					<text>发布游记</text>
				</view>
				<view class="iconfont icon-arrow-down inview"></view>
			</view>
			<view class="operationItem flex flexBei" @click="navtoSeurity">
				<view>
					<view class="iconfont icon-anquan inview"></view>
					<text>安全中心</text>
				</view>
				<view class="iconfont icon-arrow-down inview"></view>
			</view>
		</view>
		<!-- 用户操作 -->
		<view class="operation user_operation">
			<view class="operationItem flex flexBei" @click="navtoTaravelInfo">
				<view>
					<view class="iconfont icon-jieshao1 inview" style="font-size: 34rpx;" ></view>
					<text >产品介绍</text>
				</view>
				<view class="iconfont icon-arrow-down inview"></view>
			</view>
			<view class="operationItem flex flexBei" @click="callphone">
				<view>
					<view class="iconfont icon-kefu inview"></view>
					<text>联系客服</text>
				</view>
				<view class="iconfont icon-arrow-down inview"></view>
			</view>
			<view class="operationItem flex flexBei" @click="navtoagreement">
				<view>
					<view class="iconfont icon-xieyi inview"></view>
					<text>用户协议</text>
				</view>
				<view class="iconfont icon-arrow-down inview"></view>
			</view>
			<view class="operationItem flex flexBei" @click="navtoSet">
				<view>
					<view class="iconfont icon-shezhi1 inview"></view>
					<text>设置</text>
				</view>
				<view class="iconfont icon-arrow-down inview"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState} from 'vuex'
	import { getwechatUrl} from '../../api/user.js'
export default {
	data() {
		return {};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: '用户'
		})	
	},
	computed: {
		...mapState(['userinfo', 'Usernum'])
	},
	methods: {
		// 登录
		async login() {
			if (!this.$store.state.loginstatus) {
				const url = await getwechatUrl()
				window.location.href = url.data.data.url
			}
		   },
		navtoagreement() {
			uni.navigateTo({
				url: '../agree/agree'
			});
		},
		// 联系客服(拨打电话)
		callphone() {
			uni.makePhoneCall({
				phoneNumber: '15913701203' //仅为示例
			});
		},
		// 跳转到安全中心
		navtoSeurity() {
			uni.navigateTo({
				url: '../security/security'
			});
		},
		// 跳转到产品介绍
		navtoTaravelInfo () {
			uni.navigateTo({
				url: '../travel_info/travel_info'
			})
			},
		// 跳转到设置页面
		navtoSet() {
			uni.navigateTo({
				url: '../setting/setting'
			});
		},
		// 跳转到消息列表页
		navtoInformation() {
			uni.navigateTo({
				url: '../information/information'
			});
		},
		// 跳转到游记页面
		navtoTravel() {
			uni.navigateTo({
				url: '../mytravels/mytravels'
			});
		},
		// 跳转到发布游记页面
		navtosendTravel() {
			uni.navigateTo({
				url: '../send_travel/send_travel'
			});
		},
		// 跳转到收藏页
		navtocollection() {
			uni.navigateTo({
				url: '../collection/collection'
			});
		},
		// 跳转到关注页
		navtoAttention() {
			uni.navigateTo({
				url: '../attention/attention'
			});
		},
		// 跳转到粉丝页
		navtoFans() {
			uni.navigateTo({
				url: '../fans/fans'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 用户 */
	.user {
		background-color: $theme-color;
		color: #fff;
		padding: 24rpx 12rpx;
		.hand_login {
			padding: 12rpx 24rpx 24rpx 12rpx;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 12rpx;
			}
			.info {
				padding-left: 12rpx;
				.name {
					font-size: 32rpx;
					font-weight: bolder;
					button {
						color: #fff;
						line-height: 46rpx;
						min-width: 86rpx;
						padding: 0 8rpx;
						border-radius: 12rpx;
						background-color: #13c2c2;
						font-size: 22rpx;
						border: none;
					}
				}
				.personality {
					line-height: 68rpx;
				}
			}
		}	
	}
	/* 用户信息的样式 */
	.tabInfo {
		width: 700rpx;
		background-color: #fff;
		padding: 20rpx 0;
		margin: 18rpx auto 0 auto;
		justify-content: space-around;
		text-align: center;
		border-radius: 24rpx;
	}

/* 操作列表 */
.operation {
	width: 700rpx;
	padding: 0 24rpx;
	font-size: 26rpx;
	margin: 18rpx auto 0 auto;
	background-color: #fff;
	.operationItem {
		height: 92rpx;
		line-height: 92rpx;
		border-bottom: 1px solid #f0f0f0;
		.iconfont {
			padding-right: 24rpx;
			font-size: 42rpx;
		}
	}
}
/* 用户操作列表 */
.user_operation {
	margin-top: 18rpx;
}
</style>
